<template>
  <rt-dialog
    v-model="show"
    :hide-on-blur="hideOnBlur"
    :z-index="zIndex"
    @on-hide="$emit('on-hide')"
    @on-show="$emit('on-show')"
    class="rt-custom-dialog"
  >
    <div class="rt-alert">
      <div v-if="!!_title" class="rt-alert-title">{{ _title }}</div>
      <div v-if="!showInput" class="rt-alert-content">
        <slot>
          <div v-html="content" />
        </slot>
      </div>
      <div v-else class="rt-alert-content">
        <!-- <input
          ref="input"
          v-bind="getInputAttrs()"
          v-model="msg"
          :placeholder="placeholder"
          class="rt-alert-msgbox"
          @touchend="setInputFocus"
        /> -->
        <!--输入框start-->
        <div class="rt-customconfirm-inputbar">
          <div class="rt-customconfirm-wrapper">
            <!-- Search Input -->
            <div class="rt-customconfirm-input-wrapper">
              
              <input
                v-focus
                v-if="autoFocus"
                key="search-autofocused-input"
                ref="input"
                v-model="searchText"
                :placeholder="placeholder"
                type="text"
                class="rt-search-input"
                :maxlength="totalCount"
                @touchend="setInputFocus"
              />
              <input
                v-else
                key="rt-search-input"
                ref="input"
                v-model="searchText"
                :placeholder="placeholder"
                :readonly="readonly"
                type="text"
                :maxlength="totalCount"
                class="rt-search-input"
              />
              
            </div>
            <div
              v-if="!!searchText"
              class="rt-search-icon rt-search-icon-right"
              @click.stop="removeSearchText"
            >
              <rt-icon name="rt-base-search-delete" size="12" />
            </div>
            
          </div>
          
        </div>
        <div class="rt-customconfirm-input-count">
            {{remnant}}/{{totalCount}}
        </div>
        <!--输入框end-->
      </div>
      <div class="rt-alert-footer">
        <a
          v-if="showCancelButton"
          href="javascript:;"
          class="rt-alert-footer__btn cancel"
          @click="_onCancel"
          >{{ _cancelText }}</a
        >
        <a
          v-if="showConfirmButton"
          href="javascript:;"
          class="rt-alert-footer__btn"
          @click="_onConfirm"
          >{{ _confirmText }}</a
        >
      </div>
    </div>
  </rt-dialog>
</template>

<script>
export default {
  name: 'RtCustomConfirm',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    showInput: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    title: String,
    content: String,
    confirmText: String,
    cancelText: String,
    hideOnBlur: {
      type: Boolean,
      default: false
    },
    zIndex: Number,
    closeOnConfirm: {
      type: Boolean,
      default: true
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    inputAttrs: Object,




    //输入框
    autoFocus: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    inputValue: {
      type: String,
      default: ''
    },
    totalCount: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      show: false,

      //输入框
      searchText: this.inputValue,
    };
  },
  computed: {
    _title() {
      return this.title || this.$_t('toast.title', '提示');
    },
    _confirmText() {
      return this.confirmText || this.$_t('toast.confirm', '确认');
    },
    _cancelText() {
      return this.cancelText || this.$_t('toast.cancel', '取消');
    },
    remnant() {
      return this.searchText.length;
    }
  },
  watch: {
    value(val) {
      this.show = val;
    },
    show(val) {
      this.$emit('input', val);
      this.searchText = this.inputValue;
    }
    /*inputValue(newVal, oldVal) {
      this.searchText = newVal;
    }*/
  },
  methods: {
    setInputFocus(evt) {
      if (evt) {
        evt.preventDefault();
      }
      this.$refs.input.focus();
    },
    getInputAttrs() {
      return (
        this.inputAttrs || {
          type: 'text'
        }
      );
    },
    _onConfirm() {
      if (!this.show) {
        return;
      }
      if (this.closeOnConfirm) {
        this.show = false;
      }
      this.$emit('on-confirm', this.searchText);
    },
    _onCancel() {
      if (!this.show) {
        return;
      }
      this.show = false;
      this.$emit('on-cancel');
    },
    removeSearchText() {
      this.searchText = '';
    },
  }
};
</script>
<style lang="less"  scoped>
@search-font-size: 14px;
@search-font-color: #222;
@search-btn-font-color: #555;
.rt-customconfirm-inputbar {
  padding: 8px 15px 8px 15px;
  background-color: #ffffff;
  display: flex;
  align-items: center;

  .rt-customconfirm-wrapper {
    background-color: #F4F5F8;
    // background:rgba(180,189,207,.15);
    height: 44px;
    width: 100%;
    border-radius: 4px;
    position: relative;
    flex: 1;
    z-index: 10;
    .rt-search-icon {
      position: absolute;
      top: 0; 
      bottom: 0;
      margin: auto;
      &.rt-search-icon-right{
        right: 10px;
        height: 100%;
        width: 32px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      &.rt-search-icon-left{
        left: 12px;
        height: 16px;
      }
    }

    .rt-customconfirm-input-wrapper {
      position: absolute;
      left: 10px;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      .rt-search-input {
        width: 100%;
        box-sizing: border-box;
        border: none;
        outline: none;
        font-size: @search-font-size;
        height: 44px;
        line-height: normal;
        padding: 0.7em 28px 0.7em 0;
        vertical-align: middle;
        border-radius: 0;
        border-top-right-radius: 1em;
        border-bottom-right-radius: 1em;
        background: none;
        color: @search-font-color;
      }

      .rt-search-input::-webkit-input-placeholder {
        font-size: @search-font-size;
        line-height: normal;
      }
    }
  }

  .rt-search-button-wrapper {
    text-align: center;
    margin-left: 8px;
    padding-top: 1px;
    border: none;
    height: 28px;
    line-height: 28px; 
  }
  .rt-btn{
    font-size: @search-font-size;
    color: @search-btn-font-color;
  }
  
}
.rt-alert-content {
  .rt-customconfirm-input-count {
    position: absolute;
    right: 30px;
    color:#8B9FC6;
    font-size:10px;
  }
}
</style>
